﻿Sticker = function(htmlSticker) {

};

SnowBoard = function (htmlTaskBoard) {
    /* Properties */
    var seed = 10;
    var sectionPaddings = 10;

    /* End Properties */

    /* Hub */
    var snowBoardHub = $.connection.snowBoardHub;
    var clientGuid = $('#clientGuid').val();

    var sectionToDo = $('#sectionToDo');
    var sectionInProgress = $('#sectionInProgress');
    var sectionDone = $('#sectionDone');
    var sectionPending = $('#sectionPending');

    var snapSticker = function (sticker) {
        var currentSection = getSection(sticker);
        var st = dockSticker(sticker, currentSection);
        var stickerId = $(st).attr('id');
        var currentStickerOffset = $(st).offset();

        var postData = new Object();
        postData.stickerId = stickerId;
        postData.newX = currentStickerOffset.left;
        postData.newY = currentStickerOffset.top;

        snowBoardHub.moveSticker(clientGuid, stickerId, 'todo', currentStickerOffset.left, currentStickerOffset.top);
        // Ajax way to do the same as via hub
        //        $.ajax({
        //            type: 'POST',
        //            url: 'Home/MoveSticker',
        //            data: postData,
        //            success: function () {

        //            }
        //        });
    };

    var dockSticker = function (sticker, currentSection) {
        var stickerOffset = $(sticker).offset();
        var currentSectionOffset = $(currentSection).offset();

        // Moving sticker into section
        var maxLeft = $(currentSection).width() + currentSectionOffset.left - $(sticker).width() - sectionPaddings;
        if (stickerOffset.left > maxLeft) {
            $(sticker).css('left', maxLeft);
        }
        var maxTop = $(currentSection).height() + currentSectionOffset.top - $(sticker).height() - sectionPaddings;
        if (stickerOffset.top > maxTop) {
            $(sticker).css('top', maxTop);
        }
        if (stickerOffset.left < currentSectionOffset.left + sectionPaddings) {
            $(sticker).css('left', currentSectionOffset.left + sectionPaddings);
        }
        if (stickerOffset.top < currentSectionOffset.top + sectionPaddings) {
            $(sticker).css('top', currentSectionOffset.top + sectionPaddings);
        }

        // Rounding position
        stickerOffset = $(sticker).offset();

        var left = roundPosition(stickerOffset.left, currentSectionOffset.left + sectionPaddings);
        var top = roundPosition(stickerOffset.top, currentSectionOffset.top + sectionPaddings);
        $(sticker).css('left', left);
        $(sticker).css('top', top);

        return sticker;
    };

    var getSection = function (sticker) {
        var stikerPosition = $(sticker).position();
        var stickerX = stikerPosition.left + ($(sticker).width() / 2);
        var stickerY = stikerPosition.top + ($(sticker).height() / 2);
        if (isWithin(stickerX, stickerY, sectionToDo)) return sectionToDo;
        if (isWithin(stickerX, stickerY, sectionInProgress)) return sectionInProgress;
        if (isWithin(stickerX, stickerY, sectionDone)) return sectionDone;
        if (isWithin(stickerX, stickerY, sectionPending)) return sectionPending;
        return null;
    };

    var isWithin = function (stickerX, stickerY, targetHtml) {
        var targetPos = $(targetHtml).position();
        var minX = targetPos.left;
        var maxX = targetPos.left + $(targetHtml).width();
        var minY = targetPos.top;
        var maxY = targetPos.top + $(targetHtml).height();
        if (stickerX >= minX && stickerX <= maxX && stickerY >= minY && stickerY <= maxY) return true;
        return false;
    };

    var roundPosition = function (positionValue, containerValue) {
        var alter = parseInt((positionValue - containerValue) % seed);
        var intPos = positionValue;
        var halfAlter = seed / 2;
        if (alter <= halfAlter) {
            intPos -= alter;
        } else {
            intPos += seed - alter;
        }
        return intPos;
    };

    $('.sticker', htmlTaskBoard).each(function (index, sticker) {
        $(sticker).dblclick(function () {
            var modalWindow = $('#myModal').modal();
            var postData = new Object();
            postData.stickerId = "sticker_1";
            $.ajax({
                type: 'POST',
                url: '../Home/GetStickerDetails',
                data: postData,
                success: function (response) {
                    var modalBody = $('.modal-body', modalWindow);
                    modalBody.empty();
                    $(response).hide().appendTo(modalBody).show();
                }
            });

        });

        $(sticker).draggable({
            containment: "#TaskBoard",
            scroll: false,
            stack: "#stickers-container div",
            stop: function () {
                snapSticker(sticker, 20);
            }
        });
    });

    // SignalR functionality
    $.connection.hub.start();

    snowBoardHub.MoveSticker = function (responseClientGuid, stickerId, newX, newY) {
        if (responseClientGuid != clientGuid) {
            var sticker = $('#' + stickerId);
            $(sticker).animate({
                left: newX,
                top: newY
            });
        }
    };
}